<script setup>
import {ref, watch, onMounted} from 'vue';
import {$WinPages} from "@jzl/comps-mg";

const props = defineProps(['ext']);

const page = ref(null);
const form = ref(null);

const init = () => {
  if (!props.ext) props.ext = {};
  if (!('pageCode' in props.ext)) {
    props.ext.pageCode = '';
  }
};

const loadFormData = async () => {
  form.value = null;
  let pageValue = null;
  const pageCode = props.ext.pageCode;

  if (page.value && page.value.page_code === pageCode) {
    //
  } else if (pageCode) {
    pageValue = await japi.page.getPageByCode(pageCode);
  }

  page.value = pageValue;
};

const showSourceWin = () => {
  $WinPages({
    // type: 'view',
    onConfirm: async (info) => {
      const pageCode = info.page_code;
      props.ext.pageCode = pageCode;
    }
  });
};

onMounted(() => {
  init();
  loadFormData();
});

watch(
  () => props.ext.pageCode,
  () => {
    loadFormData();
  },
  {deep: true}
);
</script>

<template>
  <div
    class="ele-prop-item elem-design-prop-logic"
    v-if="ext"
  >
    <!--<h5>引用页面</h5>-->
    <el-form
      ref="form"
      label-width="">
      <el-form-item>
        <el-tag
          v-if="page && page.page_code"
          size="medium"
          style="margin-right: 10px;"
        >{{ page.page_name }}</el-tag>
        <el-button
          type="primary"
          plain
          @click="showSourceWin()"
        >选择引用页面</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
